<template>
  <view class="match-container">
    <view class="match-header">
      <text class="match-title">我的搭配</text>
      <view class="match-actions">
        <button class="add-match-btn" @click="handleAddMatch">
          <uni-icons type="plus" size="16" color="#fff"></uni-icons>
          新建搭配
        </button>
      </view>
    </view>
    <view class="match-content">
      <scroll-view
        scroll-y="true"
        class="match-heigt"
        refresher-enabled="true"
        :refresher-triggered="refresherTriggered"
        @refresherrefresh="onPullDownRefresh"
        @scrolltolower="onReachBottom"
      >
        <view class="match-list">
          <view
            v-for="match in recordList as Array<any>"
            :key="match?.id"
            class="match-item"
            @click="handleMatchClick(match)"
          >
            <view class="match-images">
              <image
                v-for="(item, index) in match.images.slice(0, 3)"
                :key="index"
                :src="getFullImagePath(item)"
                mode="aspectFill"
                class="match-image"
                @click="previewMatchImage(match.images, index)"
              />
              <view
                v-if="match.images.length > 3"
                class="more-items"
                @click="previewMatchImage(match.images, 3)"
              >
                +{{ match.images.length - 3 }}
              </view>
            </view>

            <view class="match-info">
              <text class="match-name">{{ match.name }}</text>
              <text class="match-desc">{{ match.description }}</text>
              <view class="match-tags">
                <text v-for="tag in match.tags" :key="tag" class="match-tag">
                  {{ tag }}
                </text>
              </view>
            </view>
          </view>
        </view>
        <!-- 加载更多状态 -->
        <view class="loading-more" v-if="isLoadingMore">
          <text>加载更多...</text>
        </view>
        <!-- 没有更多数据 -->
        <view class="no-more-data" v-if="!hasMore && !isLoadingMore">
          <text>没有更多的提交记录</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { avatarUrlImg } from "@/api/config/http";
import { postMatchList } from "@/api/match";
// 定义响应式数据
const recordList = ref([]); // 订单记录列表
const hasMore = ref(true); // 是否还有更多数据
const isLoadingMore = ref(false); // 加载更多状态
const refresherTriggered = ref(false); // 下拉刷新状态
const current = ref(1);
const size = ref(5);
const params = reactive({
  pageNum: 1,
  pageSize: 10,
});
const baseImageUrl = avatarUrlImg;
const getFullImagePath = (path: string = "") => {
  if (!path) return "";
  return path.startsWith("http") ? path : baseImageUrl + path;
};

const handleAddMatch = () => {
  uni.navigateTo({
    url: "/pages/match/match",
  });
};
const previewMatchImage = (images: string[], currentIndex: number) => {
  const urls = images.map((img) => getFullImagePath(img));
  uni.previewImage({
    urls,
    current: urls[currentIndex],
  });
};

const fetchOrderRecords = (isRefresh = false) => {
  if (isRefresh) {
    current.value = 1;
    hasMore.value = true;
  }
  if (!hasMore.value) return;
  isLoadingMore.value = true;
  setTimeout(async () => {
    const res: any = await postMatchList({
      pageNum: current.value,
      pageSize: params.pageSize,
      name: "",
    });
    const dataList = res.data.records;
    const newRecords = dataList.map((item: any) => ({
      ...item,
    }));

    if (isRefresh) {
      recordList.value = newRecords;
    } else {
      recordList.value.push(...newRecords);
    }
    console.log("recordList", recordList.value);
    hasMore.value = newRecords.length >= size.value;
    current.value++;
    isLoadingMore.value = false;
    refresherTriggered.value = false;
  }, 500);
};
// // 下拉刷新处理
const onPullDownRefresh = () => {
  refresherTriggered.value = true;
  fetchOrderRecords(true);
  uni.showToast({
    title: "刷新成功",
    icon: "success",
    duration: 300,
  });
};
// 滚动到底部处理
const onReachBottom = () => {
  if (hasMore.value && !isLoadingMore.value) {
    fetchOrderRecords();
  }
};
const handleMatchClick = (match: any) => {
  uni.showToast({
    title: "搭配详情功能开发中",
    icon: "none",
  });
};
onMounted(() => {
  fetchOrderRecords(true);
});
</script>

<style scoped lang="scss">
.match-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.match-header {
  display: flex;
  margin: 0 20rpx 30rpx 20rpx;
  justify-content: space-between;
  align-items: center;
  .match-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }

  .add-match-btn {
    height: 60rpx;
    display: flex;
    align-items: center;
    background: #92beab;
    color: #fff;
    border: none;
    margin: 10rpx;
    padding: 12rpx 24rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
    uni-icons {
      margin-right: 8rpx;
    }
  }
}

.match-content {
  height: 900rpx;
  // flex: 1;
}
.match-heigt {
  height: 100%;
}
.match-list {
  padding: 20rpx;
  .match-item {
    background: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    .match-images {
      display: flex;
      margin-bottom: 16rpx;
      position: relative;
      .match-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 8rpx;
        margin-right: 12rpx;
        border: 2rpx solid #f0f0f0;
      }

      .more-items {
        width: 120rpx;
        height: 120rpx;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8rpx;
        font-size: 24rpx;
      }
    }

    .match-info {
      .match-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 8rpx;
      }

      .match-desc {
        font-size: 28rpx;
        color: #666;
        display: block;
        margin-bottom: 12rpx;
      }

      .match-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8rpx;

        .match-tag {
          background: #f0f8f5;
          color: #92beab;
          padding: 4rpx 12rpx;
          border-radius: 12rpx;
          font-size: 24rpx;
        }
      }
    }
  }
}
.loading-more {
  text-align: center;
  padding: 30rpx 0;
  font-size: 28rpx;
  color: #999;
}

.no-more-data {
  text-align: center;
  padding: 30rpx 0;
  font-size: 28rpx;
  color: #ccc;
}
</style>
